<%--
  Created by IntelliJ IDEA.
  User: 进击的龟仙人
  Date: 2021/5/30
  Time: 17:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品列表</title>
    <%
        String path=request.getContextPath();
        String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="layui-v2.6.5/layui/css/layui.css">
</head>
<body>
<div class="layui-input-inline">
    <input type="text" name="select" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn layui-btn-primary" onclick="select()"><i class="layui-icon layui-icon-search"></i></button>
<table id="demo" lay-filter="test"></table>
<script src="layui-v2.6.5/layui/layui.js"></script>
<%--表头工具栏--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

    layui.use(['table','form'], function(){
        var table = layui.table;
        var form=layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 520
            ,url: 'manager/customerServlet?action=list' //数据接口
            ,page: true //开启分页
            ,id:'choose'
            ,toolbar:"#toolbarDemo"
            ,cols: [[ //表头
                {type:'checkbox'},
                {field: 'number', type:"numbers"}
                ,{field: 'cid', title: '用户名', width:200, sort: true}
                ,{field: 'mima', title: '密码', width:300,edit:'true'}
                ,{field: 'gender', title: '性别', width:150, sort: true,edit:'true'}
                ,{field: 'balance', title: '消费金额', width:100}
                ,{field: 'e_mile', title: '邮箱', width: 100,edit:'true'}
                ,{field:"操作",toolbar:"#barDemo"}
            ]]
        })

        // 监听行事件
        table.on('tool(test)',function (obj) {
            var data=obj.data;
            if(obj.event==='del'){
                layer.confirm('真的删除吗？',function (index) {
                    obj.del();
                    $.ajax({
                        url:"manager/customerServlet?action=delete&pid="+data.cid,
                        type:"get",
                        contentType: 'application/json;charset=utf-8',
                        dataType: "text",
                        data:{
                            'cid':data.cid,
                            'mima':data.mima,
                            'gender':data.gender,
                            'balance':data.balance,
                            'e_mile':data.e_mile,
                        },
                        success:function (res) {
                            layer.msg("删除成功")
                        },
                        error:function (res) {
                            layer.msg("删除失败")
                        }
                    });
                    layer.close(index);
                })
            }

        })
        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.pid +'] ' + field + ' 字段更改为：'+ value);

            $.ajax({
                url:"manager/customerServlet?action=update&cid="+data.cid+"&mima="+data.mima+"&gender="+data.gender+"&balance="+data.balance+"&e_mile="+data.e_mile,
                type:"post",
                contentType:'application/json;charset=utf-8',
                dataType:"text",
                data:{
                    'cid':data.cid,
                    'mima':data.mima,
                    'gender':data.gender,
                    'balance':data.balance,
                    'e_mile':data.e_mile,
                },
                success:function (res) {
                    layer.msg('编辑成功');
                },
                error:function (res) {
                    layer.msg('编辑失败');
                }
            })
        })
    });

</script>
<script type="text/javascript">
    // 单击事件
    function select() {
        var select=$("input[name='select']").val();
        var table=layui.table;
        table.reload('choose',{
            url:'manager/customerServlet?action=select&select='+select,
            where:{
                select:select
            }
        });
    }
</script>
</body>
</html>